import type { CreateCrudOptionsProps, CreateCrudOptionsRet, ValueBuilderContext } from '@fast-crud/fast-crud'
import { delRequest, pageRequest } from './api'

/**
 * 定义行数据模型
 * 如果你嫌定义数据模型麻烦，可以删掉此处，把下面出现的Row用any代替即可
 */
// export type Row = {
//   id: string
//   userName: string
//   createdDate: string
//   password: string
// }
const selectedIds = ref([])
const onSelectionChange = (changed: any) => {
  selectedIds.value = changed.map((item: any) => item.id)
}
/**
 * 定义一个CrudOptions生成器方法
 */
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  context.selectedIds = selectedIds
  return {
    crudOptions: {
      // 在这里自定义你的crudOptions配置
      request: {
        pageRequest,
        delRequest,
      },
      table: {
        rowKey: 'id',
        onSelectionChange,
      },
      actionbar: {
        buttons: {
          add: {
            show: false,
          },
        },
      },
      //这里定义两个字段
      columns: {
        $checked: {
          title: '选择',
          form: { show: false },
          column: {
            type: 'selection',
            align: 'center',
            width: '55px',
            columnSetDisabled: true, //禁止在列设置中选择
          },
        },
        id: {
          title: 'ID',
          search: {
            show: true,
            component: {
              //查询 使用选择框组件，并且是可以清除的
              name: 'el-input',
              clearable: true,
            },
          },
          addForm: { show: false }, // 不在新增表单中展示
          editForm: { show: false }, // 不在编辑表单中展示
        },
        fileName: {
          title: '文件',
          // type: 'image-uploader',
          valueBuilder(context: ValueBuilderContext) {
            //value构建，就是把后台传过来的值转化为前端组件所需要的值
            //在pageRequest之后执行转化，然后将转化后的数据放到table里面显示
            let domain = import.meta.env.VITE_APP_BASE_API
            if (import.meta.env.PROD) {
              domain = ''
            }
            context.row.fileName = `${domain}uploads/${context.row.fileName}`
            //  ↑↑↑↑↑ 注意这里是row，不是form
          },
        },
        fileType: {
          title: '文件类型',
          form: {
            show: false,
          },
        },
        fileSize: {
          title: '文件大小',
          form: {
            show: false,
          },
        },
      },
    },
  }
}
